<template>
  <div >

         <!-- <el-row type="flex" class="row-bg" justify="space-around">
  <el-col :span="7"><div class="grid-content bg-purple">创建人：{{form_data["_source"]["S-creator"]}}</div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light">创建时间：{{form_data["_source"]["S-creation-time"]}}</div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple">最后修改人：{{form_data["_source"]["S-last-modified"]}}</div></el-col>
</el-row> -->
<el-page-header @back="goBack">
</el-page-header>
      <el-tabs v-model="activeName" @tab-click="handleClick " type="border-card">
                <el-tab-pane :key="1" label="基本信息" name="0" >
        <el-row>
          <el-col :span="17">
        <el-form v-for="(item_value,item_key,index) in form_data._source[field_mapping[0]]" :key="index" size="small" :inline="false" label-width="100px" label-position="top" >
          <el-col :span="7" style="margin-right:20px">
                        <div v-if="item_value === null">
                                      <el-form-item  :required="true">

               <b> {{mapping[item_key]}}：</b>{{item_value == null ? "Null" :item_value}}
            </el-form-item>
                        </div>               
            <div v-else-if="typeof item_value === 'object'">
            <el-form-item  :required="true"  class="btn-no-line">
               <b> {{mapping[item_key]}}：</b><el-button type="text" @click="detail_info(item_value)">查看详情</el-button>
            </el-form-item>
            </div>
            <div v-else>
            <el-form-item  :required="true">

               <b> {{mapping[item_key]}}：</b>{{item_value == null ? "Null" :item_value}}
            </el-form-item>
            </div>
          </el-col>
        </el-form>
          </el-col>
   <el-col :span="1">
                                           <el-divider direction="vertical"></el-divider>

   </el-col>
          <el-col :span="6">

      <el-form ref="form" label-width="100px">
                       
                      <el-form-item label="资产类型：">
                        {{form_data._source["S-table"]}}
                    </el-form-item>
                                          <el-form-item label="创建日期：">
                        {{form_data._source["S-creation-time"]}}
                    </el-form-item>
                                                              <el-form-item label="创建来源：">
                        {{form_data._source["S-creator"]}}
                    </el-form-item>
                                                                                  <el-form-item label="最近修改：">
                        {{form_data._source["S-last-modified"]}}
                    </el-form-item>
                                                                                  <el-form-item label="资产编号：">
                        HN-CS-YH-1-NE-RSW-RUT-14
                    </el-form-item>
                            <el-form-item label="资产类型：" >
                                     <img :src="qcode" width="100" height="100">
                    </el-form-item>

        </el-form>
            

          </el-col>
        </el-row>
        </el-tab-pane>
                <el-tab-pane :key="2" label="私有信息" name="1" >
        <el-row>
        <el-form v-for="(item_value,item_key,index) in form_data._source[field_mapping[1]]" :key="index" size="small" :inline="false" label-width="100px" label-position="top" >
          <el-col :span="7" style="margin-right:20px">
            <el-form-item  :required="true">
               <b> {{mapping[item_key]}}：</b>{{item_value == null ? "Null" :item_value}}
            </el-form-item>
          </el-col>
        </el-form>
        </el-row>
        </el-tab-pane>
                        <el-tab-pane  :key="3" label="文档信息" name="3" >
              <documents @listenChileEvent="getList"  ref="childRollback"></documents>
        </el-tab-pane>
                <el-tab-pane  :key="4" label="维修记录" name="4" >
              <repair @listenChileEvent="getList"  ref="childRollback" :es_id="doc_id"></repair>
        </el-tab-pane>
        <el-tab-pane  :key="5" label="关联关系" name="5" >
              <charts @listenChileEvent="getList"  ref="childRollback"></charts>
        </el-tab-pane>
      </el-tabs>

<el-row v-show="this.activeName == 0 ||this.activeName == 1">
        <el-tabs  type="border-card">
  <el-tab-pane>
    <span slot="label"><i class="el-icon-date"></i>变更历史</span>
       <el-table v-loading="loading" :data="list" :header-cell-style="{'text-align':'center'}">
      <el-table-column type="selection" width="20" align="center"/>
      <el-table-column label="序号" align="center" type="index"/>
      <el-table-column label="操作人员" align="center" width="100" prop="_source.S-creator"/>
      <el-table-column label="变更内容" align="left"   prop="_source.change" :show-overflow-tooltip="true"/>
      <el-table-column label="操作日期" align="center" width="180">
        <template slot-scope="scope">
          <span>{{scope.row._source["S-update-time"] | formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-row :gutter="6" class="mb8">

              <el-col :span="1.5">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-help"
                @click="handleRollback(scope.row,scope.index)"
                v-hasPermi="['admin:system:operlog:get']"
              >回档
              </el-button>
              </el-col>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </el-tab-pane>
  
      <el-pagination
        style="float: right; margin-right: 100px"
        background
        layout="total, prev, pager, next"
        :page-size="page_size"
        :total="total"
        :current-page.sync="current_page"
        @current-change="on_page_change"
      >
      </el-pagination>
      </el-tabs>
</el-row>
      <el-dialog   :visible.sync="is_visible" >


<el-table
        :data="form_tableData"
        border
        header-align="center"
        >
        <!-- 自定义列的遍历-->
        <el-table-column v-for="(value,col, index) in form_tableData[0]" :key="index" :label="col" align="center">
          <!-- 数据的遍历  scope.row就代表数据的每一个对象-->
          <template slot-scope="scope">
              {{scope.row[col]}}
          </template>
        </el-table-column>

    </el-table>
</el-dialog>
      <Rollback @listenChileEvent="getList"  ref="childRollback"></Rollback>

  </div>
</template>

<script>
import { addField, delField, listField } from "@/api/vadmin/cmdb/table";
import { addRepair, delRepair, listRepair } from "@/api/vadmin/cmdb/repair";
import { listQcode } from "@/api/vadmin/cmdb/qcode";

import { listMapping} from "@/api/vadmin/cmdb/mapping";
import { listData,updateData,listRecdata } from "@/api/vadmin/cmdb/data"
import charts from './plug/charts'
import repair from './plug/repair'
import documents from './plug/document'
  import Rollback from '@/views/vadmin/cmdb/log/components/Rollback'

export default {
        computed: {
            VUE_APP_BASE_API(){
                return process.env.VUE_APP_BASE_API
            }},
  name: "detail",
  
  components: { charts,repair,documents,Rollback },
  data() {
    return {
      is_visible: false,
      loading: false,
      qcode:"",
      form_data: {"_source":{"jb":{},"sy":{},"ht":{},"wd":{},"wx":{},"gl":{},"bg":{}}},
      field_data: {fields:[]},
      post_data:{},
      field_mapping:{},
      data: {},
      errors: {},
      activeName: 0,
      is_lock:false,
      current_page:1,
      page_size:5,
      table: "",
      table_id:0,
      mapping:{},
      list:[],
      doc_id:"",
      total:0,
      items:{},
      form_tableData:[],
      tab_pane: {
        基本属性: 0,
        私有属性: 1,
      },
    };
  },
    mounted(){
    this.drawLine();

  },
  created() {
    console.log("11111111111")
    this.items=JSON.parse(localStorage.getItem('items'))
    this.doc_id=this.items
    this.field_mapping=this.$store.state.cmdb.Field_Mapping
    listQcode({id:this.items._id,index:this.items._index}).then(response=>{
    let url = window.URL.createObjectURL(response)
this.qcode = url
    }),
    this.table=this.items._source.name
    this.table_id=this.items._index
    this.getList({page:1,page_size:5,"S-data-id":this.items["_id"]})
        listMapping({table_id:this.table_id}).then(response=>{
        this.mapping=response
    })
  },
  destroyed(){
  },
  methods: {
    handleClose() {
      this.is_visible = false;
      this.data = false;
      this.$emit("listenChileEvent", 1);
    },
    handleClick() {
      console.log(this.activeName)
      if (this.activeName!==5 ||this.activeName!==4){
                this.field_data= {fields:[]}
      console.log(this.activeName)
      listField({attr:this.activeName,table:this.table}).then((response)=>{
        this.field_data={fields:response.results}
      })
      }

    },
      /** 查询登录日志 */
      getList(page) {
        this.loading = true
        listRecdata({"page":page,"id":this.items["_id"]}).then(response => {
          if (response.hits == undefined){
            this.loading = false

          }else{
            this.list = response.hits.hits
            this.total = response.hits.total
            this.loading = false
          }

          }
        ),
        listData({index:this.items["_index"],id:this.items["_id"]}).then(response=>{
          this.form_data=response["msg"]
          this.post_data=response["msg"]

        })
      },
    
    on_page_change(val){
    this.getList({page:val,page_size:this.page_size,"S-data-id":this.$route.params.data._source["S-data-id"]})

    },
    detail_info(item){
      this.form_tableData=item;
      this.is_visible=true
    },
          handleRollback(data) {
        console.log("ddddddddddddd",data)
          this.$refs.childRollback.on_show(true,data,false);
      },
    goBack(){
 this.$router.go(-1);
    },
        drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
       title: {
            text: '关联关系图'
        },
        // 提示框的配置
        tooltip: {
            formatter: function (x) {
                return x.data.des;
            }
        },
        // 工具箱
        toolbox: {
            // 显示工具箱
            show: true,
            feature: {
                mark: {
                    show: true
                },
                // 还原
                restore: {
                    show: true
                },
                // 保存为图片
                saveAsImage: {
                    show: true
                }
            }
        },

        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },
 
            // 数据
            data: [{
                name: 'node01',
                des: 'nodedes01',
                symbolSize: 70,
                category: 0,
            }, {
                name: 'IBM存储',
                des: 'nodedes02',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'ORACLE',
                des: 'nodedes3',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'APACHE',
                des: 'nodedes04',
                symbolSize: 50,
                category: 1,
            }, {
                name: 'ESXI6.0',
                des: 'nodedes05',
                symbolSize: 50,
                category: 1,
            }],
            links: [{
                source: 'node01',
                target: 'ESXI6.0',
                name: '安装于',
                des: 'link01des'
            }, {
                source: 'node01',
                target: 'IBM存储',
                name: '连接',
                des: 'link02des'
            }, {
                source: 'node01',
                target: 'ORACLE',
                name: '依赖于',
                des: 'link03des'
            }, {
                source: 'node01',
                target: 'APACHE',
                name: '依赖于',
                des: 'link05des'
            }],
        }]

        });
    }
  },
};
</script>

<style lang="scss" scoped>
 .el-divider--vertical{
    height:300px;
}

</style>
<style >
.btn-no-line> .el-form-item__content{
  line-height: 11px !important;
}
</style>